import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('子元素宽高比，card卡片组件'),
        ),
        body: const CardLayout(),
      ),
    );
  }
}

// class HomePage extends StatelessWidget {
//   const HomePage({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return AspectRatio(
//       aspectRatio: 2 / 1,
//       child: Container(
//         color: Colors.red,
//       ),
//     );
//   }
// }

class CardLayout extends StatelessWidget {
  const CardLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          elevation: 8,
          margin: const EdgeInsets.all(15),
          child: const Column(
            children: [
              ListTile(
                title: Text("张三", style: TextStyle(fontSize: 28)),
                subtitle: Text("高级软件工程师"),
              ),
              Divider(),
              ListTile(
                title: Text("电话：13522222222"),
              ),
              ListTile(
                title: Text("地址：中山博爱五路22号"),
              )
            ],
          ),
        ),
        Card(
          shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          elevation: 8,
          margin: const EdgeInsets.all(15),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "http://www.itying.com/images/flutter/3.png",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: ClipOval(
                  child: Image.network(
                    "http://www.itying.com/images/flutter/3.png",
                    fit: BoxFit.cover,
                    width: 40,
                    height: 40,
                  ),
                ),
                title: const Text("xxxxxx"),
                subtitle: const Text("eeeeee"),
              )
            ],
          ),
        ),
        Card(
          shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          elevation: 8,
          margin: const EdgeInsets.all(15),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "http://www.itying.com/images/flutter/2.png",
                  fit: BoxFit.cover,
                ),
              ),
              const ListTile(
                leading: ClipOval(
                    child: CircleAvatar(
                      radius: 20,
                      backgroundImage: NetworkImage("http://www.itying.com/images/flutter/2.png",),
                    )
                ),
                title: Text("xxxxxx"),
                subtitle: Text("eeeeee"),
              )
            ],
          ),
        ),
        Card(
          shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          elevation: 8,
          margin: const EdgeInsets.all(15),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "http://www.itying.com/images/flutter/4.png",
                  fit: BoxFit.cover,
                ),
              ),
              const ListTile(
                leading: ClipOval(
                    child: CircleAvatar(
                      radius: 20,
                      backgroundColor: Colors.cyan,
                      child: CircleAvatar(
                        radius: 16,
                        backgroundImage: NetworkImage("http://www.itying.com/images/flutter/4.png",),
                      ),
                    )
                ),
                title: Text("xxxxxx"),
                subtitle: Text("eeeeee"),
              )
            ],
          ),
        ),
      ],
    );
  }
}
